
<template>
  <div>
    <a-card :bordered="false" style="position: relative; margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <div class="search-wrapper-btn">
          <a-button type="link" @click="show = !show">
            <span v-if="!show">展开<a-icon type="down" /></span>
            <span v-else>收起<a-icon type="up" /></span>
          </a-button>
        </div>
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <div class="mode_item mode_item_none">
            <a-form-model-item label="告警时间" class="zdy-form-item-label">
              <a-radio-group buttonStyle="solid" v-model="form.alarmTimeType">
                <a-radio-button v-for="(item, key) in options" :key="key" :value="item.value">
                  {{ item.text }}
                </a-radio-button>
              </a-radio-group>
              <a-range-picker
                v-if="form.alarmTimeType === '0'"
                :allowClear="true"
                v-model="rangePickerTime"
                valueFormat="YYYY-MM-DD"
                @change="rangePickerChange"
                style="margin-left: 10px"
              />
            </a-form-model-item>
          </div>
          <div class="mode_item mode_item_none" v-show="show">
            <a-form-model-item label="数据来源" class="zdy-form-item-label">
              <a-checkbox
                :indeterminate="indeterminateState"
                :checked="checkAllState"
                @change="onCheckAllChange($event, 1)"
              >
                全部
              </a-checkbox>
              <j-multi-select-tag
                v-model="form.dataSource"
                dictCode="dataSource"
                type="checkbox"
                @change="onChange($event, 1)"
              />
            </a-form-model-item>
          </div>
          <div class="mode_item mode_item_none" v-show="show">
            <a-form-model-item label="告警类型" class="zdy-form-item-label">
              <a-checkbox
                :indeterminate="indeterminateGrade"
                :checked="checkAllGrade"
                @change="onCheckAllChange($event, 2)"
              >
                全部
              </a-checkbox>
              <j-multi-select-tag
                v-model="form.category"
                dictCode="alarmType"
                type="checkbox"
                @change="onChange($event, 2)"
              />
            </a-form-model-item>
          </div>
          <div class="mode_item" v-show="show">
            <a-form-model-item label="处置状态">
              <j-dict-select-tag v-model="form.dealStatus" placeholder="请选择" dictCode="dealStatus" />
            </a-form-model-item>
            <a-form-model-item label="告警对象">
              <a-input v-model="form.alarmName" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="情报名称">
              <a-input v-model="form.infoName" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="处置人">
              <a-input v-model="form.dealBy" placeholder="请输入" />
            </a-form-model-item>
          </div>
          <div class="mode_item" v-show="show">
            <a-form-model-item label="产生次数">
              <a-input v-model="form.warnNum" placeholder="请输入" />
            </a-form-model-item>
          </div>
          <div style="margin-top: 20px">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              <span>
                <a-button type="primary" style="margin: 0 10px" @click="saveConfig"> 保存配置 </a-button>
              </span>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div style="margin-bottom: 20px;display: flex;">
        <downLoadComponents
          ref="downLoadComponents"
          :formData="exportData"
          :apiUrl="downUrl"
          :fileText="fileText + '.xls'"
        >
          <a-button class="exportBtn" @click="onExport"> 导出数据 </a-button>
        </downLoadComponents>
        <a-button @click="onHandle()" :disabled="isDisabled" style="margin-left: 20px">处置</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="id"
          :showColSettings="true"
          :hideColSettings="['action']"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        >
          <template v-slot:colSettings>
            <a-button class="table-custom-cols"> 字段配置 </a-button>
          </template>
          <template slot="dealStatus" slot-scope="text">
            <span :style="text==1?'color:rgba(217, 0, 27, 0.99)':'color:rgba(112, 182, 3, 0.99)'">{{text==1?'未处置':text==2?'已处置':''}}</span>
          </template>
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="onDetails(record)" type="link" style="padding: 0">详情</a-button>
            <a-button @click="onHandle(record)" type="link" style="margin-left: 10px">处置</a-button>
          </template>
        </custom-table>
      </div>
      <!--弹窗区域 -->
      <HandleModal ref="handleModalId" @ok="refreshTable"/>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import * as alarmApi from '@/api/alarm.js'
import { getXzqhList, getDictItemsFromCache } from '@/api/api'
import CustomTable from '@/components/zxd/Table/CustomTable'
import HandleModal from './components/HandleModal'
import downLoadComponents from '@/components/zxd/downLoad'
export default {
  components: {
    CustomTable,
    HandleModal,
    downLoadComponents
  },
  data() {
    return {
      moment,
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      rangePickerTime: [],
      show: false,
      loading: false,
      visible: false,
      indeterminateGrade: false,
      indeterminateState: false,
      isDisabled: true,
      reloading: false,
      dictOptions1: getDictItemsFromCache('dataSource'), //数据来源-字典值
      dictOptions2: getDictItemsFromCache('alarmType'), //告警类型-字典值
      selectKeys: [],
      form: {},
      options: [
        { value: '2', text: '今天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '0', text: '自定义' },
      ],
      columns: [
        {
          title: '告警对象',
          dataIndex: 'alarmName',
          width: 150,
          align: 'center',
          ellipsis:true,
          scopedSlots: { customRender: 'alarmName' },
        },
        {
          title: '情报名称',
          dataIndex: 'infoName',
          width: 200,
          align: 'center',
          ellipsis:true,
          scopedSlots: { customRender: 'infoName' },
        },
        {
          title: '情报ID',
          dataIndex: 'infoCode',
          width: 115,
          align: 'center',
          scopedSlots: { customRender: 'infoCode' },
        },
        {
          title: '产生次数',
          dataIndex: 'warnNum',
          width: 100,
          align: 'center',
        },
        {
          title: '数据来源',
          dataIndex: 'sourceType',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'sourceType' },
        },
        {
          title: '告警类型',
          dataIndex: 'category',
          width: 140,
          align: 'center',
          customRender: (text) => {
            return text==1?'区域告警':text==2?'物品告警':text==3?'账户告警':text==4?'网站告警':''
          },
        },
        {
          title: '告警时间',
          dataIndex: 'alarmTime',
          width: 180,
          align: 'center',
          // customRender: (text) => {
          //   return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : ''
          // },
        },
        {
          title: '处置状态',
          dataIndex: 'dealStatus',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'dealStatus' },
        },
        {
          title: '处置人',
          dataIndex: 'dealBy',
          width: 140,
          align: 'center',
        },
        {
          title: '处置内容',
          dataIndex: 'dealContent',
          width: 200,
          ellipsis:true,
          align: 'center',
        },
        {
          title: '处置时间',
          dataIndex: 'dealTime',
          width: 180,
          align: 'center',
        },
        {
          title: '操作',
          width: 180,
          align: 'center',
          dataIndex: 'action',
          // slots: { title: 'customIsAction' },
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: [],
      exportData: {},
      fileText: '告警动态-导出',
      downUrl: 'smuggle/smuInfoWarn/alarmExportXls',
    }
  },
  computed: {
    checkAllState() {
      let bool = false
      let dataSource =
        Object.keys(this.form).length > 0 && this.form.dataSource ? this.form.dataSource.split(',') : []
      if (this.dictOptions1.length === dataSource.length) {
        bool = true
      }
      return bool
    },
    checkAllGrade() {
      let bool = false
      let category =
        Object.keys(this.form).length > 0 && this.form.category ? this.form.category.split(',') : []
      if (this.dictOptions2.length === category.length) {
        bool = true
      }
      return bool
    },
  },
  created() {},
  async mounted() {
    await this.getConfig()
    this.onQuery()
  },
  methods: {
    initForm() {
      this.$set(this.form, 'alarmTimeType', this.options[0].value)
      this.$set(
        this.form,
        'dataSource',
        this.dictOptions1
          .map((v) => {
            return v.value
          })
          .join(',')
      )
      this.$set(
        this.form,
        'category',
        this.dictOptions2
          .map((v) => {
            return v.value
          })
          .join(',')
      )
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.$nextTick(() => {
        // 重置行政区划
        // this.$refs.linkage.reload()
        this.reload()
      })
      this.initForm()
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      alarmApi
        .smuInfoWarnList(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    //导出
    onExport() {
      //  var exportFields = this.$refs.table.settingColumns
         var idList = this.selectKeys
         this.exportData = {
           idList:idList,
           listQuery:this.form
         }
       setTimeout(() => {
         this.$refs.downLoadComponents.exportDowmPOST()
         this.$refs.table.onClearRowKeys()
      }, 500)
    
      
    },
    //处置
    onHandle(record) {
      console.log("this.selectKeys",this.selectKeys)
      var id
      if(record){
        id = record.id;
      }else{
        id = this.selectKeys.join()
        console.log("this.id",id)
      }
      this.$refs.handleModalId.show(id)
    },
    // 保存配置
    saveConfig() {
      const config = {
        alarmTimeType: this.form.alarmTimeType,
        alarmStartTime: this.form.alarmStartTime,
        alarmEndTime: this.form.alarmEndTime,
        dataSource: this.form.dataSource,
        category: this.form.category,
        dealStatus: this.form.dealStatus,
        alarmName: this.form.alarmName,
        infoName: this.form.infoName,
        dealBy: this.form.dealBy,
        warnNum: this.form.warnNum,
      }
      var parameter = {
        config:JSON.stringify(this.form),
        modulePrefix:'alarm_dynamics'
      }
      console.log("parameter",parameter)
      alarmApi
        .saveQueryConfig(parameter)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    // 获取保存配置
    async getConfig() {
      try {
        var parameter = {
          modulePrefix:'alarm_dynamics'
        }
        let res = await alarmApi.getQueryConfig(parameter)
        if (res.success) {
          let data = res.result && res.result != 'null' ? res.result : {}
          let parseData = Object.keys(data).length > 0 ? JSON.parse(data) : {}
          if (data && Object.keys(parseData).length > 0) {
            this.$set(this.form, 'alarmTimeType', parseData.alarmTimeType)
            this.$set(this.form, 'dataSource', parseData.dataSource)
            this.$set(this.form, 'category', parseData.category)
            this.$set(this.form, 'alarmStartTime', parseData.alarmStartTime)
            this.$set(this.form, 'alarmEndTime', parseData.alarmEndTime)
            this.$set(this.form, 'alarmName', parseData.alarmName)
            this.$set(this.form, 'dealStatus', parseData.dealStatus)
            this.$set(this.form, 'infoName', parseData.infoName)
            this.$set(this.form, 'dealBy', parseData.dealBy)
            this.$set(this.form, 'warnNum', parseData.warnNum)
            this.rangePickerTime = [parseData.alarmStartTime, parseData.alarmEndTime]
          } else {
            this.initForm()
          }
        } else {
          this.initForm()
        }
      } catch (err) {
        this.$message.warn('请求失败！')
      }
    },
    // 详情
    onDetails(record) {
      this.$router.push({
        path: '/smuggleAlarm/detail',
        query: {
          id: record.id,
          module: 1,
        },
      })
    },
    // 详情
    // onHandle(record) {
    //   this.$refs.detailsModalRef.handle(record)
    //   this.$refs.detailsModalRef.title = '疑似受害人详情'
    //   this.$refs.detailsModalRef.disableSubmit = true
    // },
    // 告警时间
    rangePickerChange(date) {
      this.$set(this.form, 'alarmStartTime', date[0])
      this.$set(this.form, 'alarmEndTime', date[1])
    },
    //全选 type为1，数据来源；type为2,告警类型
    onCheckAllChange(e, type) {
      if (type === 1) {
        Object.assign(this, { indeterminateState: false })
        this.$set(
          this.form,
          'dataSource',
          e.target.checked
            ? this.dictOptions1
                .map((v) => {
                  return v.value
                })
                .join(',')
            : null
        )
      } else if (type === 2) {
        Object.assign(this, { indeterminateGrade: false })
        this.$set(
          this.form,
          'category',
          e.target.checked
            ? this.dictOptions2
                .map((v) => {
                  return v.value
                })
                .join(',')
            : null
        )
      }
      // console.log(this.form.dataSource)
    },

    onChange(checkedList, type) {
      let dataLists = checkedList.split(',')
      // console.log(this.form.dataSource)
      if (type === 1) {
        this.indeterminateState = !!dataLists.length && dataLists.length < this.dictOptions1.length
      } else if (type === 2) {
        this.indeterminateGrade = !!dataLists.length && dataLists.length < this.dictOptions2.length
      }
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  > div {
    flex: 0 0 25%;
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }
  &.mode_item_none {
    > div {
      flex: inherit;
    }
  }
  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 70px;
    }
    &.xzqh-form-item-label {
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }
      /deep/.area-select {
        // margin-top: 4px;
        line-height: 1;
      }
      /deep/.select-tag {
        width: 162px !important;
        margin-left: 10px;
        margin-top: 3px;
      }
      // /deep/.area-select .area-selected-trigger {
      //   line-height: 1.15;
      // }
      // /deep/.ant-select-lg .ant-select-selection--single{
      //   height: 34px;
      // }
      // /deep/.ant-select-lg .ant-select-selection__rendered {
      //   line-height: 34px;
      //   font-size: 14px;
      // }
    }
  }
}
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 1;
}
/deep/.table-custom-cols {
  top: -48px !important;
}
.custom-ewm {
  padding: 14px;
  background-color: #fff;
  border: 1px #ccc solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
/deep/.ant-dropdown-menu-item {
  text-align: center;
  border-bottom: 1px #f5f5f5 solid;
  &:last-child {
    border-bottom: 0;
  }
}
/deep/.anticon.anticon-down {
  font-size: 14px !important;
}

.table-page-content {
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child {
    padding-left: 10px;
  }
  .text_color_1 {
    color: #02a7f0;
    padding-right: 6px;
  }
  .text_color_2 {
    color: #f59a23;
    padding-right: 6px;
  }
  .text_color_3 {
    color: #d9001b;
    padding-right: 6px;
  }
  .ant-tag-cust-green {
    background-color: #f2fee6;
    border-color: #c2fa90;
  }
  .ant-tag.ant-tag-level {
    display: block;
    font-size: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 0;
    &.level_1 {
      color: #3fb674;
      background-color: #e4fff0;
    }
    &.level_2 {
      color: #56acf2;
      background-color: #dceefd;
    }
    &.level_3 {
      color: #f9b01e;
      background-color: #fef3dc;
    }
    &.level_4 {
      color: #fd586c;
      background-color: #ffe9e7;
    }
    &.level_5 {
      color: #b40aba;
      background-color: #fecdff;
    }
  }
}
</style>
